<template>
    <div id="app" :style="appStyle">
        <Vstomp />
    </div>
</template>

<script>
import { computed } from 'vue';
import Vstomp from './components/Vstomp.vue';
import backgroundImage from '@/assets/Background.png';

export default {
    name: 'App',
    components: {
        Vstomp
    },
    setup() {
        const appStyle = computed(() => ({
            backgroundImage: `url(${backgroundImage})`,
            backgroundSize: '100%',
            backgroundPosition: 'top',
            transition: 'background-image 1s ease'
        }));

        return {
            appStyle
        };
    }
};
</script>

<style>
/* Global reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#app {
    font-family: Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    width: 1920px;
    height: 1080px;
    margin: 0 auto;
    position: absolute;
    overflow: hidden;
    background-color: black;
    background-size: 100%;
    background-position: top;
}
</style>